<template>
    <div>
        <div style="text-align: center;">人员结构</div>
        <div class="containerBox">
            <!-- 四个环状图容器 -->
            <div ref="chartContainer1" style="width: 160px; height: 160px;"></div>
            <div ref="chartContainer2" style="width: 160px; height: 160px;"></div>
            <div ref="chartContainer3" style="width: 160px; height: 160px;"></div>
            <div ref="chartContainer4" style="width: 160px; height: 160px;"></div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

interface StaffStructure {
  hrRatio: number;
  doctorRatio: number;
  abroadRatio: number;
  seniorTitleRatio: number;
}

const props = defineProps<{
  staffStructure?: StaffStructure;
}>();

console.log('props.staffStructure',props.staffStructure)

const chartContainer1 = ref<HTMLDivElement | null>(null);
const chartContainer2 = ref<HTMLDivElement | null>(null);
const chartContainer3 = ref<HTMLDivElement | null>(null);
const chartContainer4 = ref<HTMLDivElement | null>(null);

const chartData = ref([
  { value: 0, name: '研发人员' },
  { value: 0, name: '高级职称' },
  { value: 0, name: '博士' },
  { value: 0, name: '留学归国' },
]);

const createChart = (container: HTMLDivElement | null, value: number, name: string) => {
  if (container) {
    const myChart = echarts.init(container);

    const option = {
      title: {
        text: `${value}%`, // 显示百分比
        subtext: name,
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 10,  // 适当增大文本
          color: '#333'
        },
        subtextStyle: {
          fontSize: 14,
          color: '#666'
        }
      },
      series: [
        {
          name: '完成度',
          type: 'pie',
          radius: ['45%', '55%'], // 缩小环形图的粗细
          avoidLabelOverlap: false,
          label: {
            show: false, // 隐藏标签
            position: 'center'
          },
          itemStyle: {
            color: '#f79646',
          },
          data: [
            { value: value, name: '完成', itemStyle: { color: '#f79646' } },
            { value: 100 - value, name: '未完成', itemStyle: { color: '#eeeeee' } } // 灰色部分
          ]
        }
      ],
      grid: {
        x: 50,
        y: 25,
        x2: 30,
        y2: 35
      }
    };

    myChart.setOption(option);
  }
};

watch(
    () => props.staffStructure,
    (newStaffStructure) => {
      if (newStaffStructure) {
        chartData.value = [
          { value: newStaffStructure.hrRatio, name: '研发人员' },
          { value: newStaffStructure.doctorRatio, name: '高级职称' },
          { value: newStaffStructure.abroadRatio, name: '博士' },
          { value: newStaffStructure.seniorTitleRatio, name: '留学归国' },
        ];
        console.log(chartData.value,'104')
        // 重新创建图表
        createChart(chartContainer1.value, chartData.value[0].value, '研发人员');
        createChart(chartContainer2.value, chartData.value[1].value, '高级职称');
        createChart(chartContainer3.value, chartData.value[2].value, '博士');
        createChart(chartContainer4.value, chartData.value[3].value, '留学归国');
      }
    },
    { deep:true }
);

onMounted(() => {
  // 初始创建图表
  if (props.staffStructure) {
    createChart(chartContainer1.value, chartData.value[0].value, '研发人员');
    createChart(chartContainer2.value, chartData.value[1].value, '高级职称');
    createChart(chartContainer3.value, chartData.value[2].value, '博士');
    createChart(chartContainer4.value, chartData.value[3].value, '留学归国');
  }
});
</script>

<style scoped>
#chartContainer {
    position: relative;
}

.containerBox {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  margin-top: -20px;
}

.containerBox:hover {
    overflow: auto;
}
</style>
